<template lang="pug">
.container
  page-head(title="菜单管理")
    template(#append)
      n-search(size="small" placeholder="请输入搜索菜单" style="width: 200px;" @press-enter="ev_search" round)
    n-button(type="primary" @click="ev_addMenu") 新增
  .content
    n-data-table(
      size="small"
      :columns="table.columns"
      :data="table.list"
      :row-key="(row: MenuData) => row.id"
      max-height="calc(100vh - 190px)"
      :expanded-row-keys="table.expandedRowKeys"
      :on-update:expanded-row-keys="(val) => table.expandedRowKeys = val"
      virtual-scroll
      striped
    )
</template>

<script setup lang="ts">
import {onMounted, h, reactive} from "vue"
import {menuTreeTable} from "@/api/admin";
import type { DataTableColumns } from 'naive-ui'
import SvgIcon from "@/components/SvgIcon/SvgIcon.vue";
import PopoverIcon from "@/components/PopoverIcon/popover-icon.vue";
import { FilterTreeWithName, GetAllValueWithKey } from "@/utils/tools";
import {NSpace} from "naive-ui";
import lodash from "lodash";

// 菜单数据类型
type MenuData = {
  id: string
  title: string
  tab: string
  name: string
  modulesVo: {
    code: string
    id: string
    name: string
  }
  icon: string
  component: string
  seq: number
  children?: MenuData[]
  [propName: string]: any
}

// 创建表列
const createColumns = (
    {
      edit, del
    }: {
      edit: (row: MenuData) => void,
      del: (row: MenuData) => void
    },
): DataTableColumns<MenuData> => {
  return [
    { title: '菜单名称',  key: 'title', ellipsis: {tooltip: true}, width: 200 },
    { title: '标识',  key: 'name' },
    { title: '模块',  key: 'modulesVo.name', minWidth: 150 },
    { title: '图标',  key: 'icon', width: 100, render: (row) => {
        return row.icon ? h(SvgIcon, {icon: row.icon}) : ''
      } },
    { title: '路由地址',  key: 'component', ellipsis: {tooltip: true} },
    { title: '排序', key: 'seq', width: 60 },
    {
      title: '操作',
      key: 'actions',
      width: 80,
      render (row) {
        return h(NSpace, () => [
          h(PopoverIcon, {icon: 'edit', color: '#18a058', text: '修改', onClick: () => edit(row)}),
          h(PopoverIcon, {icon: 'delete-fill', color: 'red', text: '删除', onClick: () => del(row)})
        ])
      }
    }
  ]
}

// 表数据
const table = reactive<{
  baseList: MenuData[]
  list: MenuData[]
  columns: DataTableColumns<MenuData>
  expandedRowKeys: Array<string | number>
}>({
  baseList: [],
  list: [],
  expandedRowKeys: [],
  columns: createColumns({
    edit (row: MenuData) {
      window.$message.info(`修改 ${row.title}`)
    },
    del (row: MenuData) {
      window.$message.error(`删除 ${row.title}`)
    }
  })
})

// 新增
const ev_addMenu = () => {
  console.log('addMenu')
}

// 获取菜单
const getMenuList = () => {
  menuTreeTable({}).then((res) => {
    table.expandedRowKeys = GetAllValueWithKey(res.data, 'id')
    table.baseList = res.data || []
    table.list = res.data || []
  })
}

// 搜索菜单
const ev_search = lodash.throttle((val) => {
  if (!val) {
    table.list = table.baseList
  } else {
    table.list = FilterTreeWithName(table.baseList, val, ['title', 'component'])
  }
}, 1000)

const ev_expandedRowKeysChange = (val: string[]) => {
  console.log(val)
}

onMounted(() => {
  getMenuList()
})

</script>

<style lang="scss" scoped>
</style>